<template>
    <div style="widh:100%;height:100%;">
        <Nav></Nav>
        <div class="container">
            <div class="login-box">
                <p>手机号登录</p>
                <el-input style="margin-top:20px;" v-model="phone" @keyup.native="phone_check" placeholder="手机号" maxlength="11" type="tel" prefix-icon="el-ali-shouji" clearable></el-input>
                <div class="sms-box">
                    <el-input class="sms-code" v-model="sms_code" @keyup.native="sms_check" maxlength="4" placeholder="验证码" prefix-icon="el-ali-yanzhengma" clearable></el-input>
                    <el-button :disabled="sms_lock" style="width:112px;" @click="send_sms">{{ sms_status }}</el-button>
                </div>
                <el-button style="width:100%;margin-top:50px;" type="primary" @click="checkLogin">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Nav from '../component/nav.vue'
    export default {
        components:{
            Nav,
        },
        data() {
            return {
                phone:'',
                sms_code:'',
                sms_status:'获取验证码',
                sms_lock:false,
                call_back:'',
            }
        },
        created(){
            if(this.$getUrlParam('_oauth_callback')){
                this.call_back = this.$getUrlParam('_oauth_callback')
            }
        },
        mounted(){
        },
        methods: {
            send_sms() {
                let self = this
                let phone = this.phone
                if(!(/^1[3456789]\d{9}$/.test(phone))){
                    self.$notify.error({
                        title: '错误',
                        message: '手机号格式错误'
                    });
                    return false
                }
                self.sms_lock = true
                this.$axios({
                    url: this.$url.loginGetSms,
                    method:'post',
                    data:{
                        phone:phone
                    }
                }).then(response=>{
                    if(response.data.result.success){
                        self.$notify({
                            title: '提示',
                            message: '验证码已发送',
                            type: 'success'
                        });
                        let timeout = 60;
						let timer = setInterval(function(){
							if(timeout > 0){
								timeout--;
								self.sms_status = timeout+'秒'
							}else{
                                self.sms_lock = false
								self.sms_status = '获取验证码';
								clearInterval(timer);
							}
						},1000);
                    }else{
                        if(response.data.result.errorCode == '5001'){
                            let timeout = response.data.result.errorMsg.replace(/[^0-9]+/ig,"")
                            let timer = setInterval(function(){
                                if(timeout > 0){
                                    timeout--;
                                    self.sms_status = timeout+'秒'
                                }else{
                                    self.sms_lock = false
                                    self.sms_status = '获取验证码';
                                    clearInterval(timer);
                                }
                            },1000);
                        }
                        self.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            phone_check(){
                this.phone=this.phone.replace(/[^\.\d]/g,'');
                this.phone=this.phone.replace('.','');
            },
            sms_check(){
                this.sms_code=this.sms_code.replace(/[^\.\d]/g,'');
                this.sms_code=this.sms_code.replace('.','');
            },
            checkLogin(){
                let self = this
                let phone = this.phone
                if(!(/^1[3456789]\d{9}$/.test(phone))){
                    self.$notify.error({
                        title: '错误',
                        message: '手机号格式错误'
                    });
                    return false
                }
                let sms_code = this.sms_code
                if(!sms_code || sms_code.length < 4){
                    self.$notify.error({
                        title: '错误',
                        message: '请填写验证码'
                    });
                    return false
                }
                this.$axios({
                    url: this.$url.loginCheck,
                    method:'post',
                    data:{
                        mobile:this.phone,
                        mobile_code:this.sms_code,
                        oauth_callback:'',
                    }
                }).then(response=>{
                    if(response.data.result.success){
                        this.$store.commit('logined',response.data.content)
                        if(this.call_back == ''){
                            this.$router.push('/')
                        }else{
                            //直接跳转到各平台内部路由
                            this.$axios({
                                url: this.$url.reTrunUrl,
                                method:'post',
                                data:{
                                    url:this.call_back
                                }
                            }).then(response=>{
                                if(response.data.result.success){
                                    window.location.href=response.data.content.url
                                }
                            }).catch(error=>{
                                console.log(error);
                            })
                        }
                    }else{
                        self.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                })
            }
        },
    }
</script>

<style scoped>
    .container{
        width: 100%;
        height:100%;
        background-image: url('https://cdn.hansuku.com/login_bg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    .login-box{
        position: fixed;
        top:30%;
        right:150px;
        width:325px;
        height:280px;
        background-color:#fff;
        z-index: 9;
        box-shadow: 0 0 5px;
        padding:20px;
    }
    .login-box p{
        font-size:18px;
        color:#4783BE;
        text-align: center;
        border-bottom:2px solid #4783BE;
        padding:0px 0px 10px 0px;
        margin:0px 20px 0px 20px;
    }
    .sms-box{
        margin-top:20px;
    }
    .sms-code{
        width:207px;
    }
</style>